<template>
	<view class="cart   clearfix">
		<cu-custom bgColor="header cart  flex-pack-end bg-white"  isBack>
			<block slot="content">购物车</block>
			<view class="wp100 flex align-center justify-end lh1 f14" slot="right">
				<view class="flex-text h30 px15" @click="confirmCartEdit" v-if="cartEdit"><text>完成</text></view>
				<view class="flex-text h30 px15" @click="handleCartEdit" v-else><text>编辑</text></view>
			</view>
		</cu-custom>
		<!-- bar -->
		<view class="cu-bar cart-bar  solid-top border-width-1  cur-bar-cart-fixed px15">
			<label class="flex align-center" @tap.prevent="checkedAllCart">
				<image src="/static/order/choice.png" class="block18" mode="" v-if="checkedAll"></image>
				<image src="/static/order/nochoice.png" class="block18" mode="" v-else></image>
				<text class="ml10 f14">全选</text>
			</label>
			<view class="flex align-center justify-end">
				<view class="total mr20 f16 text-prices" v-if="!cartEdit">
					<text>合计:</text>
					<text class="">￥{{ total }}</text>
				</view>
				<view class="action mr0">
					<button class="cu-btn f14 text-prices lines-danger round px30 " :disabled="!disabled" @click="deleteCart" v-if="cartEdit">
						删除
					</button>
					<button class="cu-btn f14 text-white button-jianbian round px30 " style="background-color: #0183fd !important;" :disabled="!disabled" @click="confirmCart" v-else>
						结算
						<text v-if="num > 0">({{ num }})</text>
					</button>
				</view>
			</view>
		</view>
		<view class="flex flex-direction px15">
			<view v-for="(item,index) in List" class="flex flex-direction py20 bg-white box-shadow mt10 radius-5 " :key="index">
				<view class="flex align-center justify-start px10">
					<image src="/static/order/nochoice.png" @click="pushstoregood(item,index)"  v-if="!item.style" class="block18" mode=""></image>
					<image src="/static/order/choice.png"  @click="pushstoregood(item,index)"  v-else class="block18" mode=""></image>
					<view class="flex align-center" v-if="item.storeId!=0" @click="pushPage('/pages/store/index?id='+item.storeId)">
						<image src="/static/order/store.png" class="block15 ml15"></image>
						<text class="ml10" v-if="item.storeId!=0">{{item.storeName}}</text>
						<text class="cuIcon-right ml5" ></text>
					</view>
					<view class="flex align-center" v-else>
						<image src="/static/order/store.png" class="block15 ml15"></image>
						<text class="ml10" >平台商品</text>
						<text class="cuIcon-right ml5" ></text>
					</view>
				</view>
				<view class="flex align-center justify-start py20  px10" v-for="(shangpin,ids) in item.goods" :key="ids">
					<view @click="checkeaddCart(index,ids)" v-if="shangpin.goodstyle">
						<image src="/static/order/choice.png"    class="block18" mode=""></image>
					</view>
					<image src="/static/order/nochoice.png" @click="checkeaddCart(index,ids)" v-else class="block18" mode=""></image>
					<view class="block70  discenter  ml15" @click="pushPage('/pages/goods/index?id='+shangpin.goodId)">
						<image :src="shangpin.good.pic" class="block70" ></image>
					</view>
					<view class="flex flex-direction mwc-1 ml10 h70 justify-between">
						<view class="flex flex-direction">
							<text class="ellipsis2 wp100" @click="pushPage('/pages/goods/index?id='+shangpin.goodId)">{{shangpin.good.name}}</text>
							<view class="flex align-center flex-wrap wp100 pr10">
								<view class="" v-for="(names,ggname) in shangpin.good.ggName" :key="ggname">
									<text class="f12 text-info mt5">{{names.name}}</text>
									<text v-if="ggname!=shangpin.good.ggName.length-1" class="text-info f12">,</text>
								</view>
							</view>
						</view>
						<view class="flex align-center mt8 justify-between wp100" >
							<text class="text-danger " v-if="shangpin.good.status!='4'">￥{{shangpin.good.money}}</text>
							<text class="text-danger " v-else>{{shangpin.good.money}}邦豆</text>
							<view class="flex align-center justify-end">
								<text @click="movenum(shangpin,index)" class="block-num-1 mr1 discenter cuIcon-move" :class="{nonums:shangpin.num==1}"></text>
								<text class="block-num-2 discenter mr1">{{shangpin.num}}</text>
								<text @click="addnum(shangpin,index)" class="block-num-3 discenter cuIcon-add" :class="{nonums:shangpin.num==99}"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="cu-load f12 color-info" :class="isLoading ? 'loading' : 'over'">没有更多了</view> -->
		<view class="flex flex-direction align-center py30"  style="margin: 180rpx 0;" v-if="List.length==0">
			<view class="">购物车还没有商品呢</view>
			<view class="discenter f12 cart-guang" @click="guangguang">去逛逛吧~</view>
		</view>
		<view class="flex flex-direction mt15">
			<view class="discenter">
				<image src="/static/order/vips.png" style="width: 340rpx;height: 40rpx;" mode=""></image>
			</view>
			<view class="flex align-center flex-wrap px15 justify-between mb10">
				<view class="tuijian-box flex flex-direction mt15" @click="pushPage('/pages/goods/index?id='+item.id)"  v-for="(item,index) in goods" :key="index">
					<image :src="item.pic" class="tuijian-pic"></image>
					<view class="bg-white flex flex-direction px5 py10">
						<view class="f12 ellipsis2 mt5 bg-white ">{{ item.name }}</view>
						<text class="text-prices mt10">￥{{ item.money }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
	data() {
		return {
			cartEdit: false,
			num:0,
			disabled:true,
			checkedAll:false,
			checkedid:[],
			goods:[],
		}
	},
	computed: {
		...mapState(['baseURL', 'isLoading']),
		total(){
			let heji=0
			let checkedids=[]
			this.List.forEach(item => {
				item.goods.forEach(shangpin => {
					if(shangpin.goodstyle){
						heji+=shangpin.num*shangpin.good.money
						checkedids.push(shangpin.gwcId)
					}
				})
			})
			this.checkedid=checkedids
			return heji.toFixed(2)
		}
	},
	onShow() {
		this.clearData()
		this.getData()
		this.clearvip()
		this.getVip()
	},
	onPullDownRefresh() {
		this.clearData()
		this.getData()
	},
	
	onHide() {
		this.checkedAll=false
	},
	onReachBottom() {
		this.getVip()
	},
	methods: {
		guangguang(){
			this.$Router.pushTab('/pages/home/index')
		},
		async getVip() {
			if (this.finish) return
			let {
				data:{vipgoods}
			} = await this.$http.post('home.vippage', { page: this.page },{tipConfig: { storeLoading: true, isSuccessTip: false }})
			this.finish = vipgoods.length < 20
			!this.finish && (this.page += 1)
			this.goods = [...this.goods, ...vipgoods]
		},
		clearvip(){
			this.finish=false
			this.page=1
			this.goods=[]
		},
		async getData() {
			let { data } = await this.$http.post('good.cart')
			this.List=data.map(item => {
				item.goods = item.goods.map(shangpin => {
					return {...shangpin,goodstyle:false} 
				})
				return {...item,style:false} 
			})
		},
		confirmCartEdit(){
			this.cartEdit= false
		},
		handleCartEdit(){
			this.cartEdit=	true
		},
		async movenum(shangpin,index){
			if(shangpin.num==1){
				return false
			}else{
				let { data } = await this.$http.post('good.cartmove',{gwcId:shangpin.gwcId,status:2}, {
					tipConfig: {storeLoading: true,isSuccessTip: false}
				})
				shangpin.num=shangpin.num-1
			}
		},
		async confirmCart(){
			if(this.checkedid.length==0){
				return false
			}else{
				let { data} = await this.$http.post('order.cartjiance',{gwcIds:this.checkedid})
				this.pushPage('/pages/order/confirm?type='+1+'&&cartid='+this.checkedid)
			}
		},
		
		async addnum(shangpin,index){
			if(shangpin.num==99){
				return false
			}else{
				let { data } = await this.$http.post('good.cartadd',{gwcId:shangpin.gwcId,status:1}, {
					tipConfig: {storeLoading: true,isSuccessTip: false}
				})
				shangpin.num=shangpin.num+1
			}
		},

		checkeaddCart(index,ids){
			this.List[index].goods[ids].goodstyle=!this.List[index].goods[ids].goodstyle
			let storelength=this.List[index].goods.filter(ids => ids.goodstyle==true).length
			if(this.List[index].goods.length==storelength){
				this.List[index].style=true
			}else{
				this.List[index].style=false
			}
		},
		checkedAllCart(){
			this.checkedAll=!this.checkedAll
			this.List.forEach(item => {
				item.style=this.checkedAll
				 item.goods.forEach(shangpin => {
					shangpin.goodstyle=this.checkedAll
				})
			})
		},
		async deleteCart(){
			if(this.checkedid.length==0){
				return false
			}else{
				let { data } = await this.$http.post('good.delcart',{gwcIds:this.checkedid}, {
					tipConfig: {storeLoading: true,isSuccessTip: true}
				})
				this.cartEdit=false
				this.clearData()
				this.getData()
			}
		},
		pushstoregood(item,index){
			this.List[index].style=!this.List[index].style
			this.List[index].goods.forEach(shangpin => {
				shangpin.goodstyle=this.List[index].style
			})
		},
		
	}
}
</script>

<style lang="less">
.block-num-1{
	width: 46rpx;
	height: 46rpx;
	background-color: #F4F1F4;
}
.nonums{
	color: #999999;
	background-color: #F2F2F2 !important;
}
.block-num-2{
	width: 67rpx;
	height: 46rpx;
	background-color: #EAE8EB;
}
.block-num-3{
	width:46rpx;
	height: 46rpx;
	background-color: #F4F1F4 ;
}
.mr1{
	margin-right: 2rpx !important;
}
.cur-bar-cart-fixed{
	position: fixed;
	/* #ifdef H5 */
	bottom: 0px;
	/* #endif */
	/* #ifdef APP-PLUS */
	bottom: 0px;
	/* #endif */
	width: 100%;
	z-index: 1;
	background-color: #FFFFFF;
}
.cart {
	.bg {
		width: 100%;
		height: 450upx;
		overflow: hidden;
		position: fixed;
		z-index: 0;
		left: 0;
		right: 0;
		top: 0;
		&::before {
			content: '';
			display: block;
			width: 1500upx;
			height: 950upx;
			// background-image: linear-gradient(190deg, rgba(255, 51, 51, 1), rgba(255, 117, 117, 1));
			background: #ff5b5b;
			border-radius: 50%;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translate(-50%, -55%);
		}
	}
	&-guang{
		background-color: #ff5538;
		color: #FFFFFF;
		width: 140rpx;
		height: 50rpx;
		border-radius: 60rpx;
		margin-top: 40rpx;
	}
	&-bar {
		background-color: #fafafa;
		box-shadow: 0 1upx 0 0 #e0e0e0;
	}
}
.mwc-1{
	width: calc(100% - 230rpx);
}
.bg-fense{
	background-color: #FFECE5;
	width: 150rpx;
}
.block10{
	width: 24rpx;
	height: 24rpx;
}
.tuijian-box{
	width: 320rpx;
}
.tuijian-pic {
	width: 320rpx;
	height: 320rpx;
}
</style>
